<template>
  <div class="org"></div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "org",
  props: {
    width: {
      type: Number
    },
    height: {
      type: Number
    }
  },
  mounted() {
    const width = this.width,
      height = this.height - 20;
    let svg = d3
      .select(this.$el)
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    let tree = d3
      .tree()
      .size([width, height - 100])
      .separation(function(a, b) {
        return (a.parent == b.parent ? 1 : 1) / a.depth;
      }); // 设定节点之间的间隔
    d3.json("/api/three.json").then(data => {
      // 将原始数据转化为布局数据
      var hierarchyData = d3.hierarchy(data);
      // 将布局数据转化为树状图所需的数据
      var treeData = tree(hierarchyData);
      // 将树状图数据取得节点数据和边数据(节点连线)
      var nodes = treeData.descendants();
      var links = treeData.links();
      window.console.log(links);
      // 添加路径
      svg
        .selectAll("path")
        .data(links)
        .enter()
        .append("path")
        .attr("d", function(d) {
          let sourceX = d.source.x,
            sourceY = d.source.y,
            targetX = d.target.x,
            targetY = d.target.y;
          return `M ${sourceX}, ${sourceY}, V ${(targetY - sourceY) / 1.4 + sourceY} H ${targetX} V ${targetY}`;
        })
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .attr("stroke", "#D2D2D2");
      let gs = svg
        .selectAll("g")
        .data(nodes)
        .enter()
        .append("g")
        .attr("transform", function(d) {
          return `translate(${d.x},${d.y})`;
        });
      // 添加方框
      gs.append("rect")
        .attr("x", function(d) {
          const fontwidth = 25;
          let width = fontwidth * d.data.name.length;
          if (d.depth === 0) return -width / 2 - 10;
          return d.depth > 1 ? -12.5 : -width / 2;
        })
        .attr("rx", 5)
        .attr("ry", 5)
        .attr("width", function(d) {
          const fontwidth = 25;
          let width = fontwidth * d.data.name.length;
          if (d.depth === 0) return width + 20;
          return d.depth > 1 ? fontwidth : width;
        })
        .attr("height", function(d) {
          const fontwidth = 25;
          let a;
          d.data.name.length > 2 ? a = 3*fontwidth : a = d.data.name.length * fontwidth;
          if (d.depth === 0) return fontwidth + 10;
          return d.depth > 1 ? a : fontwidth;
        })
        .attr("fill", "#FFC97D")
        .attr("style", "cursor:pointer");
      // 添加文字
      gs.append("text")
        .style("writing-mode", function(d) {
          return d.depth > 1 ? "tb" : "";
        })
        .style("cursor", "pointer")
        .attr("x", function(d) {
          const fontwidth = 8;
          let width = fontwidth * d.data.name.length;
          return d.depth > 1 ? 0 : -width;
        })
        .attr("y", function(d) {
          if (d.depth === 0) return 22;
          return d.depth > 1 ? 10 : 18;
        })
        .on("mouseover", function(d) {
          let gss = svg
            .append("g")
            .attr("transform", function() {
              return `translate(${d.x},${d.y})`;
            })
            .attr("id", "tips");
          gss
            .append("rect")
            .attr("x", function() {
              const fontwidth = 18;
              let width = fontwidth * d.data.name.length;
              return -width / 2;
            })
            .attr("y", function() {
              window.console.log(d.y);
              return -25;
            })
            .attr("rx", 3)
            .attr("ry", 3)
            .attr("width", function() {
              const fontwidth = 18;
              let width = fontwidth * d.data.name.length;
              return width;
            })
            .attr("height", 25)
            .attr("fill", "rgba(0, 0, 0, 0.4)");
          gss.append("text")
            .attr("x", function() {
              const fontwidth = 8;
              let width = fontwidth * d.data.name.length;
              return -width;
            })
            .attr("y", -8)
            .attr("fill", "#fff")
            .text(function() {
              return d.data.name;
            });
        })
        .on("mouseout", function() {
          d3.select("#tips").remove();
        })
        .attr("fill", "#fff")
        .text(function(d) {
          if (d.data.name.length > 2) {
            return d.data.name.slice(0, 2) + '...';
          }
          return d.data.name;
        });
    });
    // 添加事件
    // svg.selectAll('rect')
    //   .on('mouse',
    // function aaa() {
    //   window.console.log(66666666);
    // })
  }
};
</script>

<style scoped>
.org {
  padding-top: 40px;
}
</style>

